<template>
  <div class="body">
    <div class="top">
      <h1 class="ellipsis">{{ content.name }}</h1>
      <h2>{{ content.complete_remark }}</h2>
      <h4 @click="shareClick()">分享</h4>
    </div>

    <div class="heade">
      <h1>
        任务当前步骤: <span>{{ icur + 1 }}</span
        >/{{ steptotal }}
      </h1>
      <h2 @click="swilperkey = !swilperkey">查看所有步骤</h2>
    </div>

    <div class="cont">
      <div
        class="conli"
        v-show="icur == index"
        v-for="(item, index) in task"
        :key="index"
      >
        <h2>
          第{{ index + 1 }}步：<span>{{ item.step_name }}</span>
        </h2>
        <p>{{ item.step_desc }}</p>
        <img
          :src="item.thumb"
          alt=""
          onerror="errorimg()"
          preview="step1"
          @error="errorImage($event)"
        />
        <h3>步骤{{ (index + 1) | toChnum }}</h3>
      </div>
    </div>

    <div class="tijiao">
      <!-- （上传当前步骤中要求内容） -->
      <h1 v-if="tashnow.collect_word == 1">
        任务提交<span style="margin-left:0.1rem;">{{
          tashnow.collect_word_title
        }}</span>
      </h1>
      <h2
        v-if="tashnow.collect_word == 1"
        :class="{ active: textmsg.length > 0 }"
      >
        <input type="text" placeholder="请输入信息" v-model="textmsg" />
      </h2>
      <!-- （上传当前步骤中要求截图） -->
      <h1 v-if="tashnow.collect_image == 1">
        上传图片<span style="margin-left:0.1rem;">{{
          tashnow.collect_image_title
        }}</span>
      </h1>

      <ul v-if="tashnow.collect_image == 1">
        <li>
          <div @click="checkimg">
            <img src="../../assets/img/rwxx_img_tianjia.png" alt="" />
            <input
              ref="filElem"
              required="required"
              multiple="multiple"
              type="file"
              accept="image/*"
              name="report"
              @change="getFile"
            />
          </div>
          <h3 v-if="imgSrc === '' && !tashnow.users_task_post">添加</h3>
          <h3 v-if="imgSrc !== '' || tashnow.users_task_post">修改</h3>
        </li>
        <li v-if="imgSrc !== ''">
          <div>
            <img :src="imgSrc" alt="" preview="step1" />
          </div>
          <h3 v-if="imgstate == 2">
            <img src="../../assets/img/rwxx_icon_shibai.png" alt="" />
            <span>上传失败</span>
          </h3>
          <h3 v-if="imgstate == 4">
            <i>上传中</i>
          </h3>
          <h3 v-if="imgstate == 1">
            <img src="../../assets/img/rwxx_icon_yishangchuan.png" alt="" />
            <i>已上传</i>
          </h3>
        </li>
        <li v-if="tashnow.users_task_post && imgSrc === ''">
          <div>
            <img
              v-if="tashnow.users_task_post"
              :src="tashnow.users_task_post.thumb"
              alt=""
              preview="step3"
            />
          </div>
        </li>
      </ul>
    </div>

    <ul class="btn">
      <transition
        name="slide-fade1"
        enter-active-class="fadeInUp"
        leave-active-class="fadeOutDown"
      >
        <div class="btnclass1" v-if="btnkey">
          <li v-if="icur != 0" @click="faileMission(0)">
            <img src="../../assets/img/up.png" alt="" /><span>上一步</span>
          </li>
          <li v-if="icur == 0" @click="faileMission(1)">
            <img src="../../assets/img/fangqi1.png" alt="" /><span
              >放弃任务</span
            >
          </li>
          <li @click="uploadmis(0)">
            <img src="../../assets/img/next1.png" alt="" /><span>下一步</span>
          </li>
        </div>
      </transition>
    </ul>

    <div
      class="swilperbox"
      v-if="swilperkey"
      @click.stop="swilperkey = !swilperkey"
    >
      <div class="swiperwrap" ref="swilperbox">
        <swiper
          :options="swiperOption"
          ref="mySwiper"
          @someSwiperEvent="callback"
        >
          <!-- slides -->
          <swiper-slide v-for="(item, index) in task" :key="index">
            <h1 class="title">
              任务当前步骤: {{ index + 1 }}/{{ task.length }}
            </h1>
            <div class="conli">
              <h2>
                第{{ index + 1 }}步：<span>{{ item.step_name }}</span>
              </h2>
              <p>{{ item.step_desc }}</p>
              <img
                :src="item.thumb"
                alt=""
                preview="step"
                @error="errorImage($event)"
              />
              <h3>步骤{{ (index + 1) | toChnum }}</h3>
            </div>
            <!--                        <div class="btn" @click="swilperkey=!swilperkey"></div>-->
            <div class="zhanwei"></div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import { axiosPost, axiosPostnotoken } from '../../axios';
import { Toast, Indicator } from 'mint-ui';
export default {
  name: '',
  data() {
    return {
      icur: 0, //当前步骤
      swilperkey: false,
      swiperOption: {
        // 参数选项,显示小点
        pagination: '.swiper-pagination',
        //循环
        loop: false,
        slide: 1,
        //每张播放时长3秒，自动播放
        autoplay: 2000,
        // delay:1000
        paginationClickable: true,
        spaceBetween: 25,
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: '1.32',
        coverflowEffect: {
          rotate: 0,
          stretch: 0,
          depth: 70,
          modifier: 1,
          slideShadows: false,
        },
      },
      imgSrc: '', //图片本地base64链接
      content: {}, //当前任务信息
      task: [], //所有步骤数据
      tashnow: {}, //当前步骤
      imgInfo: {}, //图片具体信息
      textmsg: '', //文本内容
      imgstate: 0, //上传图片的状态
      imgupurl: '', //上传的图片地址
      steptotal: 0, //总步骤
      imgallUrl: '',
      btnkey: true,
      timeOut: null,
    };
  },
  mounted() {
    this.task_id = this.$route.query.task_id;
    if (this.$route.query.state == 0) {
      this.getjixurenwu();
    } else {
      this.getindextasx();
    }
    //图片放大刷新
    this.$previewRefresh();

    window.addEventListener('scroll', this.handleScroll, true);
  },
  watch: {
    //监听查看全部步骤，控制大小
    swilperkey: function(to) {
      if (to) {
        this.$nextTick(() => {
          let deviceheight =
            document.documentElement.clientHeight || window.innerHeight;
          let swipbox = this.$refs.swilperbox.clientHeight;
          if (deviceheight - swipbox > 100 && deviceheight - swipbox < 150) {
            this.$refs.swilperbox.style.marginTop = '0';
          }
          if (deviceheight - swipbox > 150) {
            this.$refs.swilperbox.style.marginTop =
              (deviceheight - swipbox) / 2 + 'px';
          }
          if (deviceheight - swipbox < 100) {
            this.$refs.swilperbox.style.marginTop = '0';
          }
          for (let item of this.$refs.swilperbox.children[0].children[0]
            .children) {
            //console.log(item)
            item.children[1].style.minHeight =
              this.$refs.swilperbox.clientHeight * 0.53 + 'px';
          }
        });
      }
    },
  },
  methods: {
    errorImage(e) {
      e.target.src = require('../../assets/img/error.png');
    },
    handleScroll() {
      // let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
      this.btnkey = false;
      clearTimeout(this.timeOut);
      this.btnkey = false;
      this.timeOut = setTimeout(() => {
        this.btnkey = true;
      }, 200);
    },
    //放弃任务
    faileMission(state) {
      if (state == 0) {
        if (this.icur < 1) {
          return;
        }
        this.icur--;
        this.getjixurenwu();
      } else {
        axiosPost(
          'task/abandon_task',
          {
            user_id: JSON.parse(localStorage.getItem('userinfo')).user_id,
            task_id: this.task_id,
            user_task_id: this.$route.query.task_id,
          },
          (res) => {
            //console.log(res)
            if (res.code !== 1) {
              return Toast({
                message: res.msg,
                duration: 1000,
              });
            }
            Toast({
              message: '任务已放弃',
              duration: 1000,
            });
            this.$router.go(-1);
          }
        );
      }
    },
    shareClick() {
      let userinfo = localStorage.getItem('userinfo');
      this.$router.push({
        path: '/share',
        query: {
          task_id: this.content.task_id,
          user_id: JSON.parse(userinfo).user_id,
        },
      });
    },
    callback() {},
    checkimg() {
      this.$refs.filElem.dispatchEvent(new MouseEvent('click'));
    },
    getFile(e) {
      let that = this;
      const inputFile = e.target.files[0];
      for (let i = 0; i < e.target.files.length; i++) {
        console.log(e.target.files[i]);
      }
      if (inputFile) {
        if (
          inputFile.type !== 'image/jpeg' &&
          inputFile.type !== 'image/png' &&
          inputFile.type !== 'image/gif'
        ) {
          return Toast({
            message: '不是有效的图片文件！',
            duration: 1000,
          });
        }

        const reader = new FileReader();
        reader.readAsDataURL(inputFile);
        reader.onload = function() {
          that.imgstate = 4;
          that.imgSrc = this.result;
          let img = new Image();
          img.src = this.result;
          var width = 400, //图像大小
            height = 400, //图像大小
            quality = 1, //图像质量
            canvas = document.createElement('canvas'),
            drawer = canvas.getContext('2d');
          img.onload = function() {
            const originHeight = img.height;
            const originWidth = img.width;
            let compressedWidth = img.height;
            let compressedHeight = img.width;
            if (originWidth > width && originHeight > height) {
              // 更宽更高，
              if (originHeight / originWidth > height / width) {
                // 更加严重的高窄型，确定最大高，压缩宽度
                compressedHeight = height;
                compressedWidth = height * (originWidth / originHeight);
              } else {
                //更加严重的矮宽型, 确定最大宽，压缩高度
                compressedWidth = width;
                compressedHeight = width * (originHeight / originWidth);
              }
            } else if (originWidth > width && originHeight <= height) {
              // 更宽，但比较矮，以width作为基准
              compressedWidth = width;
              compressedHeight = width * (originHeight / originWidth);
            } else if (originWidth <= width && originHeight > height) {
              // 比较窄，但很高，取maxHight为基准
              compressedHeight = height;
              compressedWidth = height * (originWidth / originHeight);
            } else {
              // 符合宽高限制，不做压缩
            }
            canvas.width = compressedWidth;
            canvas.height = compressedHeight;
            drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
            that.changeimg(canvas.toDataURL('image/jpg', quality));
            that.$refs.filElem.value = '';
          };
        };
      } else {
        return;
      }
    },
    //获取任务详情
    getindextasx() {
      axiosPost(
        'index/task_info',
        {
          task_id: this.task_id,
        },
        (res) => {
          if (res.code !== 1) {
            return Toast({
              message: res.msg,
              duration: 1000,
            });
          }
          //console.log(res)
          this.content = res.data.content;
          this.task = res.data.task;
          this.tashnow = res.data.task[this.icur];
          this.steptotal = res.data.task.length;
          //图片放大刷新
          this.$previewRefresh();
          //console.log(this.tashnow)
        }
      );
    },
    //继续任务
    getjixurenwu() {
      axiosPost(
        'task/continue_task',
        {
          user_task_id: this.task_id,
        },
        (res) => {
          //console.log(res)
          if (res.code !== 1) {
            return Toast({
              message: res.msg,
              duration: 1000,
            });
          }
          //console.log(res)
          this.content = res.data.content;
          this.task = res.data.task;
          this.tashnow = res.data.task[this.icur];
          if (res.data.task[this.icur].users_task_post) {
            this.imgupurl =
              '/upload' +
              res.data.task[this.icur].users_task_post.thumb.split(
                '/upload'
              )[1];
            this.textmsg = res.data.task[this.icur].users_task_post.content;
          }
          this.steptotal = res.data.task.length;
          //图片放大刷新
          this.$previewRefresh();
          //console.log(this.tashnow)
        }
      );
    },
    //换取图片
    changeimg(url) {
      axiosPostnotoken(
        'upload/ossupload',
        {
          base64: url,
        },
        (res) => {
          //console.log(res)
          if (res.code !== 1) {
            return Toast({
              message: res.msg,
              duration: 1000,
            });
          }
          this.imgstate = 1;
          this.imgallUrl = res.data.accessUrl;
          this.imgupurl = res.data.thumb;
          //图片放大刷新
          this.$previewRefresh();
        }
      );
    },
    //提交任务
    uploadmis(state) {
      if (this.tashnow.collect_word == 1) {
        if (this.textmsg === '') {
          return Toast({
            message: '请输入文本',
            duration: 1000,
          });
        }
      }
      if (this.tashnow.collect_image == 1) {
        if (this.imgupurl === '') {
          return Toast({
            message: '请上传图片',
            duration: 1000,
          });
        }
      }
      if (this.imgstate == 4) {
        return Toast({
          message: '图片上传中',
          duration: 1000,
        });
      }
      if (this.imgstate == 2) {
        return Toast({
          message: '图片上传失败，请重新选择',
          duration: 1000,
        });
      }
      let users_task_postid = '';
      if (this.tashnow.users_task_post) {
        users_task_postid = this.tashnow.users_task_post.id;
      }
      Indicator.open({
        text: '提交中...',
        spinnerType: 'double-bounce',
      });
      axiosPost(
        'task/pull_task_info',
        {
          task_id: this.tashnow.task_id,
          task_step_id: this.tashnow.id,
          user_task_id: this.$route.query.task_id,
          content: this.textmsg,
          thumb: this.imgupurl,
          id: users_task_postid,
        },
        (res) => {
          //console.log(res)
          Indicator.close();
          if (res.code !== 1) {
            return Toast({
              message: res.msg,
              duration: 1000,
            });
          }

          if (res.data.done) {
            this.$router.push({
              path: '/misssuccess',
              query: { task_id: this.tashnow.task_id },
            });
            return;
          }
          //console.log(this.task[this.icur])
          this.task[this.icur].users_task_post = {
            content: this.textmsg,
            thumb: this.imgupurl,
            id: users_task_postid,
          };
          if (state == '0') {
            this.nextstep();
          } else {
            Toast({
              message: '数据保存成功',
              duration: 1000,
            });
          }
        }
      );
    },
    //下一步
    nextstep() {
      if (this.icur > this.steptotal) {
        return;
      }
      this.icur = this.icur + 1;
      this.tashnow = this.task[this.icur];
      if (this.tashnow.users_task_post) {
        this.textmsg = this.tashnow.users_task_post.content;
        this.imgupurl =
          '/upload' + this.tashnow.users_task_post.thumb.split('/upload')[1];
      } else {
        this.textmsg = '';
        this.imgupurl = '';
      }
      //图片放大刷新
      this.$previewRefresh();
      this.imgSrc = '';
    },
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll, true);
  },
};
</script>

<style scoped lang="less">
@import '../../style/default';
@import '../../style/swiper.min.css';

.body {
  background: #f9f9f9;
  overflow: auto;
}

.top {
  height: 2rem;
  background: url('../../assets/img/rwxx_img_bj.png') center -2.4rem no-repeat;
  background-size: 7.5rem auto;
  overflow: hidden;
  position: relative;

  h1 {
    font-size: 0.38rem;
    font-weight: bold;
    color: @color4;
    margin-top: 0.4rem;
    padding: 0 0.4rem;
    max-width: 5rem;
  }

  h2 {
    font-size: 0.28rem;
    font-weight: 400;
    color: #ffffff;
    margin-top: 0.1rem;
    padding: 0 0.4rem;
  }

  h4 {
    border-radius: 0.3rem;
    background: rgba(255, 149, 45, 0.6) url('../../assets/img/fenxiang1.png')
      0.25rem center no-repeat;
    background-size: 0.29rem auto;
    color: @color4;
    font-weight: normal;
    font-size: 0.3rem;
    position: absolute;
    top: 0.45rem;
    right: 0.3rem;
    text-align: center;
    padding: 0.1rem 0.25rem 0.1rem 0.6rem;
  }

  ul {
    overflow: hidden;
    margin-top: 0.6rem;
    padding: 0 0.3rem;

    li {
      float: left;
      width: 2.12rem;
      height: 1.53rem;
      background: @color4;
      box-shadow: 0 0 0.1rem rgba(240, 240, 240, 1);
      border-radius: 0.06rem;

      h3 {
        font-size: 0.44rem;
        font-weight: bold;
        color: @color3;
        text-align: center;
        margin-top: 0.35rem;
        padding: 0;

        span {
          font-size: 0.3rem;
          font-weight: 400;
        }
      }

      p {
        font-size: @font24;
        font-weight: 400;
        color: rgba(155, 155, 155, 1);
        text-align: center;
        margin-top: 0.1rem;
      }
    }
  }
}

.heade {
  height: 0.6rem;
  padding: 0 0.4rem;
  margin: 0.2rem auto;

  h1 {
    float: left;
    font-size: @font34;
    font-weight: bold;
    color: rgba(42, 43, 63, 1);

    span {
      color: @color1;
    }
  }

  h2 {
    float: right;
    font-size: 0.52rem;
    font-weight: 400;
    color: @color1;
    padding: 0.16rem 0;
    text-align: center;
    width: 3.8rem;
    border: 1px solid @color1;
    border-radius: 0.52rem;
    -webkit-transform: scale(0.5) translate(50%, -50%);
    transform: scale(0.5) translate(50%, -50%);
  }
}

.cont {
}

.title {
  font-size: 0.4rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  margin: 0.6rem 0;
}

.conli {
  background: @color4;
  border-radius: 0.06rem;
  padding: 0.4rem;
  margin: 0 0.4rem;

  h2 {
    font-size: 0.3rem;
    font-weight: bold;
    color: @color3;
    span {
      font-weight: normal;
    }
  }

  p {
    font-size: @font28;
    font-weight: 400;
    color: @color2;
    margin: 0.3rem 0;
  }

  img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }

  h3 {
    font-size: @font28;
    font-weight: 400;
    color: @color2;
    text-align: center;
    margin-top: 0.1rem;
    padding-bottom: 0.1rem;
  }
}

.tijiao {
  background: @color4;
  padding: 0.4rem 0.1rem 0.1rem;
  margin: 0.4rem 0.4rem;

  .active {
    border: 1px solid @color1;
    background: @color4;
    input {
      color: @color1;
    }
  }

  h1 {
    font-size: 0.3rem;
    font-weight: bold;
    padding: 0 0.3rem;
    color: @color3;

    span {
      font-size: 0.24rem;
      font-weight: 400;
      color: #ff462d;
    }
  }

  h2 {
    width: 5.48rem;
    height: 1.18rem;
    background: rgba(247, 247, 248, 1);
    border-radius: 0.6rem;
    padding: 0 0.3rem;
    margin: 0.4rem auto;
    border: 1px solid rgba(247, 247, 248, 1);

    input {
      height: 0.6rem;
      line-height: 0.6rem;
      width: 5.3rem;
      margin: 0.3rem 0.4rem;
      background: transparent;
      border: 0;
      font-size: 0.3rem;
    }

    input::placeholder {
      font-size: 0.28rem;
    }
  }

  ul {
    overflow: hidden;
    margin-top: 0.2rem;

    li {
      float: left;
      width: 1.7rem;
      height: 2.23rem;
      margin: 0.13rem;

      div {
        width: 1.7rem;
        height: 1.7rem;
        overflow: hidden;

        img {
          width: 1.7rem;
        }
      }

      h3 {
        font-size: @font24;
        font-weight: 400;
        color: #999999;
        text-align: center;
        margin-top: 0.16rem;

        img {
          width: 0.2rem;
        }

        span {
          font-size: @font24;
          font-weight: 400;
          color: @color1;
          margin-left: 0.08rem;
        }

        i {
          font-size: @font24;
          font-weight: 400;
          color: rgba(255, 158, 27, 1);
          margin-left: 0.08rem;
        }
      }
    }
  }
}

.btn {
  height: 1.4rem;
  width: 6.8rem;
  .btnclass1 {
    position: fixed;
    left: 0;
    bottom: 0.2rem;
    width: 100%;
    height: 1.2rem;
    background: #ffffff;
    padding: 0 0.35rem;
  }
  .fadeInUp,
  .fadeOutUp,
  .fadeUp-enter-active,
  .fadeUp-leave-active {
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  li {
    font-size: @font32;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    padding: 0.29rem 0;
    float: left;
    img {
      height: 0.32rem;
      margin-right: 0.12rem;
    }
  }

  li:nth-child(1) {
    width: 3.2rem;
    background: url('../../assets/img/rwxx_img_an_left.png') center center
      no-repeat;
    background-size: 3.2rem 1rem;
  }

  li:nth-child(2) {
    background: url('../../assets/img/rwxx_img_an_right.png') center center
      no-repeat;
    background-size: 3.6rem 1rem;
    width: 3.6rem;
  }
}

.swilperbox {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow: auto;

  .swiperwrap {
    margin-top: 20%;

    .swiper-slide {
      background: transparent;
    }

    .conli {
      background: #fff;
      margin: 0;
    }

    .btn {
      width: 0.5rem;
      height: 0.5rem;
      background: url('../../assets/img/rwxx_icon_gb.png') center center
        no-repeat;
      background-size: 0.5rem auto;
      margin: 0.4rem auto 0.2rem;
    }
    .zhanwei {
      height: 2rem;
    }
  }
}
</style>
